<template>
  <div class="relative">
    <div class="relative">
      <img
        src="~@/assets/banner.png"
        width="150"
        class="absolute top-10 left-10"
      />
    </div>
    <div class="login-box">
      <div class="login-logo">
        <img src="~@/assets/logo/logo.png" width="45" />
        <h1 class="mb-0 ml-2 text-3xl font-bold">汽车维修工单管理系统</h1>
      </div>
      <a-form
        layout="vertical"
        :model="loginFormModel"
        @submit.prevent="handleSubmit"
      >
        <a-form-item label="用户名" name="username">
          <a-input
            v-model:value="loginFormModel.username"
            size="large"
            placeholder="姓名"
          >
            <template #prefix>
              <Icon icon="ant-design:user-outlined" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item label="密码" name="password">
          <a-input
            v-model:value="loginFormModel.password"
            size="large"
            type="password"
            placeholder="a123456"
            autocomplete="new-password"
          >
            <template #prefix>
              <Icon icon="ant-design:lock-outlined"
            /></template>
          </a-input>
        </a-form-item>
        <a-form-item label="验证码" name="verifyCode">
          <a-form-item-rest>
            <div class="card">
              <div class="header">
                <div class="actions">
                  <button type="button" class="history" @click="visible = true">
                    <div
                      class="image"
                      :class="loginFormModel.isLogin ? 'success' : 'warning'"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
                        <g
                          stroke-linejoin="round"
                          stroke-linecap="round"
                          id="SVGRepo_tracerCarrier"
                        ></g>
                        <g id="SVGRepo_iconCarrier">
                          <path
                            stroke-linejoin="round"
                            stroke-linecap="round"
                            stroke-width="1.5"
                            stroke="#000000"
                            d="M20 7L9.00004 18L3.99994 13"
                          ></path>
                        </g>
                      </svg>
                    </div>
                    <div class="mt-2">
                      <span
                        class="valid_txt"
                        :class="loginFormModel.isLogin ? 'success-text' : ''"
                      >
                        {{ loginFormModel.isLogin ? "验证成功" : "立即验证" }}
                      </span>
                    </div>
                  </button>
                </div>
              </div>
            </div>
          </a-form-item-rest>
          <a-modal
            v-model:open="visible"
            :footer="null"
            :closable="false"
            style="width: 370px"
            centered
          >
            <gocaptcha-slide
              :data="loginFormModel.data"
              :events="slideEvents"
            />
          </a-modal>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            size="large"
            :loading="loading"
            block
            style="width: 100%"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
      <div class="copyright">
        2024-2026 © 汽车维修工单系统 - Based on HuluTech. 粤ICP备20020067号-1
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import "./login.css";
import { useRoute, useRouter } from "vue-router";
import { message, Modal } from "ant-design-vue";
import { Icon } from "@/components/basic/icon";
import { useUserStore } from "@/store/modules/user";
import Api from "@/api/backend/api";
import { to } from "@/utils/awaitTo";
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const visible = ref(false);
const loading = ref(false);
const loginFormModel = ref({
  username: "超管",
  password: "",
  data: {
    image: "",
    thumb: "",
    thumbX: "",
    thumbY: "",
    thumbWidth: "",
    thumbHeight: "",
    captKey: "",
  },
  isLogin: false,
});

const updateCaptcha = async () => {
  const data = await Api.captchaController.getCaptcha();
  loginFormModel.value.data.image = data["image_base64"] || "";
  loginFormModel.value.data.thumb = data["tile_base64"] || "";
  loginFormModel.value.data.captKey = data["captcha_key"] || "";
  loginFormModel.value.data.thumbX = data["tile_x"] || 0;
  loginFormModel.value.data.thumbY = data["tile_y"] || 0;
  loginFormModel.value.data.thumbWidth = data["tile_width"] || 0;
};

const slideEvents = {
  move(x: number, y: number): void {},
  refresh(): void {
    updateCaptcha();
  },
  async confirm(dots: any, clear: Function): void {
    const data = await Api.captchaController.validateCaptcha({
      key: loginFormModel.value.data.captKey,
      point: dots,
    });

    if (data.code == 0) {
      loginFormModel.value.isLogin = true;
      message.success("验证成功！");
      visible.value = false;
    } else {
      loginFormModel.value.isLogin = false;
      message.warning("验证失败，请重试！");
      setTimeout(() => {
        clear();
      }, 100);
    }
  },
  close(): void {
    console.log("close >>>>>>>");
  },
};
updateCaptcha();

const handleSubmit = async () => {
  const { username, password, isLogin } = loginFormModel.value;
  if (username.trim() == "" || password.trim() == "") {
    return message.warning("用户名或密码不能为空！");
  }
  if (!isLogin) {
    return message.warning("请输入验证码！");
  }
  message.loading("登录中...", 0);
  loading.value = true;
  // params.password = md5(password)

  const [err] = await to(userStore.login(loginFormModel.value));
  if (err) {
    Modal.error({
      title: () => "提示",
      content: () => err.message,
    });
    updateCaptcha();
  } else {
    message.success("登录成功！");
    setTimeout(() => router.replace((route.query.redirect as string) || "/"));
  }
  loading.value = false;
  message.destroy();
};
</script>

<style lang="less" scoped>
.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/login-bg.svg") no-repeat center center;
  background-size: 100%;
  position: relative;
  box-sizing: border-box;
  .copyright {
    position: absolute;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    height: 20px;
    width: 100%;
    bottom: 0px;
    color: white;
    background-color: #000000;
  }
  .login-logo {
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    .svg-icon {
      font-size: 48px;
    }
  }

  :deep(.ant-form) {
    width: 400px;

    .ant-col {
      width: 100%;
    }

    .ant-form-item-label {
      padding-right: 6px;
    }
  }
}
</style>
